<template>
  <div class="conter_t">
    <div class="conter_left">
      <h3>我的梧桐</h3>
      <ul class="atv_l">
        <li @click="click1($event)" class="activas">我的发布</li>
        <li @click="click1($event)">我的投标</li>
        <li @click="click1($event)" class="upp">
          我的收藏
          <ul class="shoucang_liebiao">
            <li v-on:click="notify($event)" class="accctve">商品收藏</li>
            <li v-on:click="notify($event)">店铺收藏</li>
          </ul>

        </li>
      </ul>
    </div>
    <div class="conter_right">
      <ul class="atv_r">
        <!--我的发布-->
        <li>
          <Myfabu class="fabu"></Myfabu>
          <Mytoubiao class="toubiao"></Mytoubiao>
          <Myshoucang class="shoucang" ref="child"></Myshoucang>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import Myfabu from '@/components/Myfabu'
  import Mytoubiao from '@/components/Mytoubiao'
  import Myshoucang from '@/components/Myshoucang'

  export default {
    data () {
      return {
        listq: true,
        datas: '',
        datasa: '',
        userId: ''
      }

    },
    methods: {
      notify (e) {
        $(e.currentTarget).addClass('accctve').siblings().removeClass('accctve')
        let index1=$(e.currentTarget).index()
          this.$refs.child.buils(index1)
          
      },
      myfilter (value) {
        return 'http://wut1.oss-cn-beijing.aliyuncs.com/' + value.split(';')[0]

      },
      click1 (e) {
        $(e.currentTarget).addClass('activas').siblings().removeClass('activas')
//        console.log( $('.atv_r li').eq($(e.currentTarget).index()).html())
//        $('.atv_r li').eq($(e.currentTarget).index()).show()
//        $('.atv_r li').eq($(e.currentTarget).index()).siblings().hide()
        if($(e.currentTarget).index()==0){
          $('.toubiao').hide()
          $('.fabu').show()
          $('.shoucang').hide()
          $('.shoucang_liebiao').slideUp("fast")

        }else if($(e.currentTarget).index()==1){
          $('.toubiao').show()
          $('.fabu').hide()
          $('.shoucang').hide()
          $('.shoucang_liebiao').slideUp("fast")

        }
        else if($(e.currentTarget).index()==2){
          $('.toubiao').hide()
          $('.fabu').hide()
          $('.shoucang').show()
          $('.shoucang_liebiao').slideDown(100)

        }
      }
    },
    mounted () {
      this.userId = sessionStorage.getItem('userId')
    },
    components: {
      Myfabu,
      Mytoubiao,
      Myshoucang
    }
  }
</script>

<style scoped>
  .conter_t {
    width: 1200px;
    height: 600px;
   
    margin: 0 auto 40px;
  }

  .conter_left {
    width: 220px;
    height: 490px;
    margin-right: 15px;
    background:#fff;
    float: left;
  }

  .conter_left h3 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    background:url(../assets/mywt.png) no-repeat 40px 10px;
  }

  .conter_left ul li {
    width: 100%;
    height: 36px;
    line-height: 34px;
    font-size: 17px;
  }
.conter_left ul .upp{
  background:url(../assets/upp.png) no-repeat 150px 15px;
}
  .conter_left ul li:hover {
    cursor: pointer;
  }

  .conter_right {
    width: calc(100% - 238px);
    height: 498px;
    background:#fff;
    float: left;
    
  }

  .conter_right ul {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .conter_right ul li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .wodedingdan .aa_p {
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    background: #ff8328;
    text-align: left;
    text-indent: 30px;
  }

  .shouhuodizhi, .wodeshoucang {
    /*display: none;*/
  }

  .shouhuodizhi p {
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    background: #ff8328;
    text-align: left;
    text-indent: 30px;
  }

  .wodeshoucang .wodeshoucang_table {
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    background: #f0f8ff;
    text-align: left;
    text-indent: 30px;
  }

  .blue_m {
    background: #ff8328;
  }

  .wodeshoucang .wodeshoucang_table span {
    display: block;
    width: 140px;
    height: 60px;
    float: left;
  }

  .wodeshoucang .sp_coll {
    width: 100%;
    height: 437px;
    overflow-y: auto;
  }

  .wodeshoucang .sp_coll .sp_coll_p {
    width: 100%;
    height: 72px;
    /*background:pink;*/
    margin: 40px 0;
  }

  .wodeshoucang .sp_coll .sp_coll_p img {
    width: 70px;
    height: 70px;
    float: left;
    margin: 0 40px;
  }

  .wodeshoucang .sp_coll .sp_coll_p p {
    width: 590px;
    height: 70px;
    float: left;
  }

  .wodeshoucang .sp_coll .sp_coll_p button {
    float: left;
    width: 80px;
    height: 26px;
    margin: 24px 0 0 63px;
  }

  .wodeshoucang .sp_coll .sp_coll_p p span {
    display: block;
    width: 100%;
    height: 35px;
    text-align: left;
  }

  .wodeshoucang .sp_coll .sp_coll_pp {
    width: 100%;
    height: 72px;
    /*background:pink;*/
    margin: 40px 0;
  }

  .wodeshoucang .sp_coll .sp_coll_pp img {
    width: 123px;
    height: 70px;
    float: left;
    margin: 0 40px;
  }

  .wodeshoucang .sp_coll .sp_coll_pp p {
    width: 370px;
    height: 70px;
    float: left;
    line-height: 70px;
    text-align: left;
    font-size: 20px;
  }

  .wodeshoucang .sp_coll .sp_coll_pp button {
    float: left;
    width: 80px;
    height: 26px;
    margin: 24px 0 0 63px;
  }

  .tot_list {
    width: 100%;
    height: 46px;
    border-bottom: 1px solid #eeeeee;
    text-align: left;
  }

  .tot_list span {
    margin-top: 16px;
    height: 18px;
    font-size: 15px;
    display: inline-block;
    padding: 0 24px;
    border-right: 1px solid #cccccc;
  }

  .tot_list span:hover {
    cursor: pointer;
  }

  .tot_list span:last-child {
    border: none;
  }

  .tot_list1 {
    width: 100%;
    height: 400px;
    position: relative;
  }

  .tot_listone {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .tot_listones {
    display: none;
  }

  .activas {
    color: #ff8328;
  }
  .toubiao{
    display: none;
  }
  .shoucang{
    display: none;
  }
  .shoucang_liebiao{
   display: none;
  }
  .shoucang_liebiao li{
    text-indent: 50px;
    color:black;
  }
  .shoucang_liebiao .accctve{
    color:red;
  }
</style>
